import http from "@/request"
import user from "@/store/user"
import { articleType } from "@/types"
import { HideLoading, ShowLoading, ShowToast } from "@/utils"
import { View, Text, ScrollView } from "@tarojs/components"
import Taro from "@tarojs/taro"
import React, { useImperativeHandle, useState } from "react"
import ArticleItem from "../articleItem"
import "./index.scss"

let pageConfig = {
    page: 1,
    size: 10,
    total: 0
}
interface propsType {
    type: 'public' | 'mine',
     height: number
}
interface refType {
    pageInit: () => void
}

const ArticleList = React.forwardRef<refType, propsType>(({ type, height }, ref) => {
    const [loadMore, setLoadMore] = useState(false)
    const [triggered, setTriggered] = useState(false)
    const [articles, setArticles] = useState<articleType[]>([])

    useImperativeHandle(ref, () => {
        return {
            pageInit
        }
      }, [])

    const pageInit = () => {
        pageConfig = {
            page: 1,
            size: 10,
            total: 0
        }
        setArticles([])
        queryList([])
    }

    const doRefresh = () => {
        setTriggered(true)
        pageInit()
    }

    const doLoadMore = () => {
        if (loadMore) {
            queryList()
        }
    }

    Taro.useLoad(() => {
        pageInit()
    })

    const queryList = (initData?: articleType[]) => {
        ShowLoading()
        setLoadMore(true)
        const { page, size } = pageConfig
        http.post('/article/page', {
            page,
            size,
            userId: type === 'mine' ? user.info?.id : undefined
        }).then(res => {
            pageConfig.page++
            pageConfig.total = res.data.total || 0
            const list = [...(initData || articles), ...(res.data.records || []).map(item => {
                return {
                    ...item,
                    imgs: (item.imgs ? item.imgs.split(',') : []).filter(url => url)
                }
            })]
            setArticles(list)
            setLoadMore(list.length < pageConfig.total)
            HideLoading()
        }).catch(err => {
            ShowToast(err.msg || '获取列表失败')
        }).finally(() => {            
            setTriggered(false)
        })
    }

    return (
        <ScrollView
            scrollY
            refresherEnabled
            onRefresherRefresh={doRefresh}
            refresherTriggered={triggered}
            onScrollToLower={doLoadMore}
            style={{ maxHeight: `calc(100vh - ${height}px)` }}>
            <View className="article-list need-filter card-background">
                {
                    articles.length ? <>
                        {articles.map(item => {
                            return <ArticleItem
                                article={item}
                                onChange={() => pageInit()}
                                edit={type === 'mine'}>
                            </ArticleItem>
                        })}
                        <View className="load-more flex-row flex-center">
                            <Text>{loadMore ? '上划加载更多' : '没有更多了'}</Text>
                        </View>
                    </> :
                        <View className="no-data flex-column flex-center">
                            <View className="title">当前类别下没有数据哦</View>
                            <View className="tips">点击下方的按钮开始记笔记吧</View>
                            <View className="bg-word text-bg-color">AI-LEDGER</View>
                        </View>
                }
            </View>
        </ScrollView>
    )
})

export default ArticleList